<template>
  <div class="app-container hor-layout">
    <add-user-excel class="left-content" @tableData="getTableData"></add-user-excel>
    <div class="ver-layout content-container">
      <!--  分组信息   -->
      <el-card :body-style="topBodyStyle">
        <el-form label-width="90px" inline>
          <el-form-item required label="男生组数">
            <el-input-number class="input-view" size="small" type="number" :min="0"
                             v-model="male" @change="reStartGroup"></el-input-number>
          </el-form-item>
          <el-form-item required label="女生组数">
            <el-input-number class="input-view" size="small" type="number" :min="0"
                             v-model="female" @change="reStartGroup"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="!canStartRandom" @click="startRandom" type="primary" size="mini">
              开始随机分组
            </el-button>
            <el-button :disabled="!canExport" type="primary" size="mini" @click="exportExcel">{{ getExportText }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-scrollbar class="content-layout">
        <!--  分组   -->
        <div class="hor-layout-side" style="width: 100%;height: 400px;margin-top: 10px">
          <div class="hor-layout" style="width: 50%;flex-wrap: wrap;">
            <div class="ver-layout-center" style="margin:10px auto;"
                 v-for="item in parseInt(male)" :key="item.id">
              <el-table :data="getMaleList(item)" stripe border size="small" max-height="350px">
                <el-table-column :label="'男生组'+ item " align="center" label-class-name="label-class1">
                  <el-table-column type="index" label="#" :width="getIndexWidth" align="center"></el-table-column>
                  <el-table-column label="姓名" prop="username" :width="getTableWidth" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div style="height: 100%;width: 1px;background: lightgrey"></div>
          <div class="hor-layout" style="width: 50%;flex-wrap: wrap;">
            <div class="ver-layout-center" style="margin:10px auto"
                 v-for="item in parseInt(female)" :key="item.id">
              <el-table :data="getFemaleList(item)" stripe border size="small" max-height="350px">
                <el-table-column :label="'女生组'+ item " align="center" label-class-name="label-class2">
                  <el-table-column type="index" label="#" :width="getIndexWidth" align="center"></el-table-column>
                  <el-table-column label="姓名" prop="username" :width="getTableWidth" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import AddUserExcel from "@/components/add-user-excel/add-user-excel.vue"
import {export_json_to_excel} from "@/utils/Export2Excel"

export default {
  components: {AddUserExcel},
  data() {
    return {
      tableData: [],
      male: "2",
      female: "2",
      maleList: [],
      femaleList: [],
      topBodyStyle: {
        height: '30px',
        marginTop: "-10px"
      },
      startFlag: false
    }
  },
  computed: {
    canStartRandom() {
      return this.tableData.length > 0 && !this.startFlag
    },
    canExport() {
      return this.maleList.length > 0 || this.femaleList.length > 0
    },
    getExportText() {
      return document.body.clientWidth > 500 ? "导出Excel" : "导出xls"
    },
    getIndexWidth() {
      return document.body.clientWidth > 500 ? "" : 30
    },
    getTableWidth() {
      return document.body.clientWidth > 500 ? "" : 60
    }
  },
  methods: {
    exportExcel() {
      let tableList = []
      for (let index = 1; index <= parseInt(this.male); index++) {
        let key = this.convertNumToLetter(index)
        let header = {[key]: `男生组${index}`}
        let list = this.getMaleList(index).map(user => {
          return {[key]: user.username}
        })
        list = [header, ...list]
        tableList = this.contactList(tableList, list)
      }
      for (let index = 1; index <= parseInt(this.female); index++) {
        let key = this.convertNumToLetter(parseInt(this.male) + index)
        let header = {[key]: `女生组${index}`}
        let list = this.getFemaleList(index).map(user => {
          return {[key]: user.username}
        })
        list = [header, ...list]
        tableList = this.contactList(tableList, list)
      }
      console.log("tableList", tableList)
      export_json_to_excel(tableList, "随机分班")
    },
    contactList(list1, list2) {
      let list = []
      if (list1.length === 0) {
        list = list2
      } else if (list2.length === 0) {
        list = list1
      } else if (list1.length > list2.length) {
        list = list1.map((item, index) => {
          return {...item, ...list2[index],}
        })
      } else {
        list = list2.map((item, index) => {
          return {...item, ...list1[index],}
        })
      }
      return list
    },
    convertNumToLetter(num) {
      return String.fromCharCode(num + 64)
    },
    getMaleList(index) {
      let count = this.maleList.length / parseInt(this.male)
      let list = this.maleList.slice((index - 1) * count, index * count)
      return list
    },
    getFemaleList(index) {
      let count = this.femaleList.length / parseInt(this.female)
      let list = this.femaleList.slice((index - 1) * count, index * count)
      return list
    },
    getTableData(data) {
      console.log("getTableData", data)
      this.tableData = data
    },
    reStartGroup() {
      this.maleList = []
      this.femaleList = []
    },
    startRandom() {
      const loading = this.$loading({
        lock: true,
        text: '随机分配中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.reStartGroup()
      setTimeout(() => {
        loading.close()
        this.$message.success("分组完成！")
        let mList = this.tableData.filter(user => user.user_sex === '男')
        let fList = this.tableData.filter(user => user.user_sex === '女')
        this.maleList = this.mapRandom(mList)
        this.femaleList = this.mapRandom(fList)
        // this.startFlag = true
      }, 3 * 1000)
    },
    mapRandom(arr) {
      for (let i = 0, len = arr.length; i < len; i++) {
        let a = parseInt(Math.random() * len);
        let temp = arr[a];
        arr[a] = arr[i]; // 随机替换
        arr[i] = temp;
      }
      return arr;
    }
  }
}
</script>

<style>
.app-container {
  width: 100%;
  padding: 10px;
  overflow: hidden;
  height: calc(100vh - 40px - 20px - 30px);
}

.left-content {
  width: 25%;
  height: 100%;
}

.content-container {
  margin-left: 10px;
  width: 75%;
  height: 100%;
}

.content-layout {
  flex: 1;
  margin-top: 5px;
  padding: 5px;
  box-shadow: 0 2px 12px 0 lightgrey;
  border: 1px solid #EBEEF5;
  border-radius: 4px
}

.label-class1 {
  font-weight: bolder;
  color: #409EFF;
  background: #ecf5ff !important;
}

.label-class2 {
  font-weight: bolder;
  color: #f56c6c;
  background: #fef0f0 !important;
}

.input-view {
  width: 120px;
}

@media screen and (max-width: 500px) {
  .input-view {
    width: 100px;
  }

  .content-container {
    margin-left: 4px;
    width: 60%;
    height: 90vh;
  }

  /deep/ .el-table__empty-text {
    width: fit-content;
  }

  /deep/ .el-card__body {
    padding: 5px;
  }
}
</style>
